.myborder(@color) {
  position: relative;
  &:after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    content: ' ';
    border-top: 1px solid @color;
  }
}

.border-none() {
  &:after {
    display: none;
  }
}

.bg-img_mob(@dir,@pic,@w,@h) {
  background-image: url("../../components/@{dir}@{pic}@2x.png");
  background-size: @w @h;
  background-repeat: no-repeat;
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
    background-image: url("../../components/@{dir}@{pic}@3x.png") ;
  }
}

.bg-img(@dir,@pic,@w,@h) {
  background-image: url("../../components/@{dir}@{pic}");
  background-size: @w @h;
  background-repeat: no-repeat;
}

.icon-type(@dir,@num,@w, @h) {
  vertical-align: top;
  display: inline-block;
  width: @w;
  height: @h;
  &.decrease {
    .bg-img(@dir, 'decrease_@{num}', @w, @h);
  }
  &.discount {
    .bg-img(@dir, 'discount_@{num}', @w, @h);
  }
  &.guarantee {
    .bg-img(@dir, 'guarantee_@{num}', @w, @h);
  }
  &.invoice {
    .bg-img(@dir, 'invoice_@{num}', @w, @h);
  }
  &.special {
    .bg-img(@dir, 'special_@{num}', @w, @h);
  }
}

.main-position{
  position: fixed;
  top: 62px;
  left: 200px;
  right: 0px;
    transition: all .1s linear;
}
.main-position-hideAll{
    transition: all .1s linear;
  top: 0;
  left: 0;
}
.main-position-right{
  position: fixed;
  top: 87px;
  right: 35px;
  z-index:1200;
}
.main-position-right-hideAll{
  top: 15px;
}
.main-right-bottom{
  position: fixed;
  bottom: 30px;
  right: 25px;
}
.under-main-position{
  margin-top:94px;
}
.main-place {
  background-color: #fff;
  .main-position();
  bottom: 10px;
  transition: all .1s linear;
  z-index:1001;
  &.hideAll {
    transition: all .1s linear;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding: 0;
    z-index:1001;
    .field-tab {
      transition: all .1s linear;
      padding: 0 10px;
    }
    .mysubmit {
      transition: all .1s linear;
      margin-left: 10px;
    }
  }
  overflow: auto;
  padding: 0 10px;
}
.messageIcon{
  .ui.compact.message{
    &.mydisabled{
      background-color: rgba(0,0,0,0.5);
    }
    position: relative;
      i.circular.icon {
          .circular_icon();
          .icon_hover_white();
      }
  }
}
.circular_icon(){
    cursor: pointer;
    background-color: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.7);
    padding:0px!important;
    width:1em!important;
    height:1em!important;
    position: absolute;
    top:-5px;
    right:-12px;
}
.compact_msg{
  .ui.compact.message{
    padding: .5em 1em;
    &:not(:first-child) {
      margin-left: 5px;
    }
  }
}
.sortMenu {
  .ui.compact.message{
    cursor: move;
    padding: .5em 1em;
    &:not(:first-child) {
      margin-left: 5px;
    }
  }
  .ui.vertical.menu{
    .item{
      cursor: move;
    }
    i.icon{
      color: rgba(0, 0, 0, 0.4);
      cursor: pointer;
    }
    .header{
      i.icon{
        margin-bottom:5px;
        margin-right:-12px;
      }

    }
  }

  .ui.menu>.item:first-child{
    padding: .22857143em 1.14285714em .92857143em ;
  }
}

.rs_info() {
  &.rs_ok {
    color: green;
  }
  &.rs_error {
    color: rgb(240, 20, 20);
  }
}

.submitBtn(){
  .submitRow {
      position: fixed;
      bottom: 0;
      line-height: 50px;
      z-index: 997;
  }
  margin-bottom: 40px;
}

.fade-transition(){
  .fade-enter-active,
  .fade-leave-active {
      transition: all 0.5s;
      opacity: 1;
  }

  .fade-enter,
  .fade-leave-active {
      opacity: 0;
  }
}

.attr_icon{
  .tabular{
    .ui.icon{
      margin-left:10px;
      color: rgba(0,0,0,0.5);
      &:hover{
        color: rgba(0,0,0,0.8);
      }
    }
  }
  .ui.tabular.menu .item{
    color: rgba(0, 0, 0, 0.6);
    &:hover {
      color: rgba(0, 0, 0, 0.9);
    }
  }
}

.clear_input(){
    .ui.icon.remove.clear_input{
        cursor: pointer;
        position: absolute;
        top:3px;
        right:3px;
        color: rgba(0,0,0,0.3);
        &:hover{
            color: rgba(0,0,0,0.6);
        }
    }
}

.icon_hover(){
    cursor: pointer;
    color: rgba(0,0,0,0.5);
    &:hover{
        color: rgba(0,0,0,0.8);
    }
}
.icon_hover_white(){
    cursor: pointer;
    color: rgba(255,255,255,0.5);
    &:hover{
        color: rgba(255,255,255,0.8);
    }
}
.icon_hover_red(){
    cursor: pointer;
    color: rgba(255,0,0,0.5);
    &:hover{
        color: rgba(255,0,0,0.8);
    }
}
.sub_btn(){
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.75);
    color: rgba(255, 255, 255, 0.8);
    &:hover{
        color: rgba(255, 255, 255, 1);
    }
}

.mya(){
    &:link,&:visited,&:hover{
        outline: none;
    }
}
